<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>ECharts</title>
    <!--<link rel="stylesheet" type="text/css" href="css/main.css"/>-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <style>#china-map {width:582px; height: 482px;margin: auto;}</style>
</head>
<body>
<div id="map_1"></div>
<script>
    function map_init(map_opts){
     //地图容器
     var map_1 = echarts.init(document.getElementById('map_1'),map_opts);
    $.getJSON('json/tag_sparrow_admin.json', function(data){
        $.each(data, function (infoIndex, info){
            if(infoIndex == 'geoCoordMap'){
                var arr = [];
                for (let i in info) {
                    let o = [];
                    o[i]=JSON.parse(info[i]);
                    arr.push(o);
                }
                var c = [];
                for (var i = 0; i<arr.length; i++) {
                    for(let a in arr[i]){
                        let b = {};
                        b.name = a;
                        b.value = arr[i][a];
                        c.push(b);
                    }
                }
                geoCoordMap = c;
            }
            if(infoIndex == 'data'){
                data2 = info;
            }
          }) 
         map_1_option.series[0].data = convertData(data2.sort(function (a, b) {
                    return b.value - a.value;
                })),
         map_1.setOption(map_1_option);
    });
}

//初始化
map_init();

var geoCoordMap = {};
var data2 = [];
//数据清洗 - 坐标保留2位小数
function setStyle(v){
    var tv = [];
    v.map(function(a,b){
        if(b<2){
            a = parseFloat(a.toFixed(2));
        }else{
            if(a>800){
                a = a/50;
            }
        }
        tv.push(a);
    });
    return tv;
}
function setNum(v){
    console.log("|||"+v+"||||");
    let toarr = v.split(',');
    return toarr[2];
}
var convertData = function (data) {
    var res = [];
    var result = []
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[i].name;
        if (geoCoord) {
            res.push({
                name: geoCoord,
                value: geoCoordMap[i].value.concat(data[i].value)
            });
        }
    }
    for (var i = 0; i < res.length; i++) {
        result.push({
            name: res[i].name,
            value: setStyle(res[i].value)
        });
    }
    return result;
};


var map_1_option = {
    tooltip : {
        trigger: 'item',
        formatter: function(a){
            return a.data.name + '<br/>' + a.data.value[2];
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#d1d1d1',
                borderColor: '#111',
            },
            emphasis: {
                areaColor: '#d1d1d1'
            }
        }
    },
    series : [
        {
            name: '热点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
                normal: {
                    color: '#f75749',
                    shadowBlur: 10,
                    shadowColor: '#131641'
                }
            },
            zlevel: 1
        }
    ]
};

    


</script>
</body>
</html>